<template>
  <div>
    <el-container>
      <!--<el-header class="common-home">-->
      <!--<div><span></span>商品审核</div>-->
      <!--<div class="refresh"><el-button icon="el-icon-refresh" @click.native="currentRefresh">刷新</el-button></div>-->
      <!--</el-header>-->
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <div>
              <i class="el-icon-search"></i> 筛选查询
            </div>
            <div>
              <el-button @click.native="selectResults">查询结果</el-button>
            </div>
          </el-header>
          <el-main class="info-main">
            <el-form ref="form" :model="form" label-width="100px">
              <el-form-item class="select-div" label="输入搜索：">
                <el-input placeholder="商品名称/商品货号" class="input-width" v-model="form.nameOrEncode"></el-input>
              </el-form-item>
              <el-form-item class="select-div" label="商品分类：">
                <el-cascader
                  ref="myCascader"
                  v-model="form.category"
                  @change="handleCascader('myCascader')"
                  :props="cascader"
                  popper-class="category"
                  expand-trigger="hover"
                  placeholder="请选择商品分类"
                  clearable
                ></el-cascader>
              </el-form-item>
              <el-form-item class="select-div" label="商品品牌：">
                <el-select v-model="form.brand" placeholder="请选择商品品牌" clearable>
                  <el-option
                    v-for="(item, index) in brands"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
      </el-main>

      <el-footer>
        <el-container class="parent-body">
          <el-header class="content-header">
            <div>
              <i class="el-icon-s-fold"></i> 数据列表
            </div>
            <div>
              <el-select v-model="sort" class="input-width2" placeholder="排列方式">
                <el-option
                  v-for="item in sortOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </el-header>
          <el-main class="info-main padding-style">
            <el-table
              ref="multipleTable"
              @selection-change="handleSelectionChange"
              :data="tableData"
              border
              style="width: 100%"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="id" label="编号" width="80"></el-table-column>
              <el-table-column label="商品图片" width="130">
                <template slot-scope="scope">
                  <img :src="scope.row.image.url" width="80" height="50" />
                </template>
              </el-table-column>
              <el-table-column label="商品名称">
                <template scope="scope">
                  <!-- <p style="text-align:left;">{{scope.row.name}}</p> -->
                  <p>{{ scope.row.name }}</p>
                  <p>品牌：{{ scope.row.brandName }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="encode" label="货号" width="180"></el-table-column>
              <el-table-column prop="marketable" label="标签">
                <template scope="scope">
                  <el-switch
                    v-model="scope.row.marketable"
                    :active-value="true"
                    :inactive-value="false"
                    active-color="#13ce66"
                  ></el-switch>
                </template>
              </el-table-column>

              <el-table-column prop="categoryId" label="商品分类"></el-table-column>

              <el-table-column prop="price[0]" label="价格"></el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleSelect(scope.$index, scope.row)">还原</el-button>
                  <el-button size="mini" @click="handleAudit(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
          <el-footer class="info-foot">
            <el-checkbox @change="toggleSelectionCheckbox" v-model="checkbox">全选</el-checkbox>
            <el-select class="margin-left input-width2" v-model="moreOperation" placeholder="批量操作">
              <el-option label="还原" value="1"></el-option>
              <el-option label="删除" value="2"></el-option>
            </el-select>
            <el-button class="margin-left" @click.native="confirm">确定</el-button>
            <div class="paging-style">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage1"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </div>
          </el-footer>
        </el-container>
      </el-footer>
    </el-container>
  </div>
</template>

<script scoped>
import spuApi from "@/api/goods/spu";
import classifyApi from "@/api/goods/classify";
import brandApi from "@/api/goods/brand";
import skuApi from "@/api/goods/sku";
export default {
  data() {
    return {
      // 获取品牌
      brands: [],
      //
      form: {
        nameOrEncode: "",
        category: [],
        brand: ""
      },
      goodsAudit: {
        id: "",
        name: "",
        status: "",
        introduction: ""
      },
      accordingPageSize: "",

      //  选中的ids
      multipleSelection: [],

      //
      moreOperation: "",

      dialogVisible: false,
      checkbox: false,
      tableData: [],

      // 排序选择
      sortOptions: [
        {
          label: "商品编号",
          value: 0
        },
        {
          label: "商品名称",
          value: 1
        },
        {
          label: "商品货号",
          value: 2
        }
      ],

      // 分页数据
      pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
      total: 5,
      currentPage1: 1,
      sort: 0,

      // 筛选处理
      cascader: {
        checkStrictly: true,
        lazy: true,
        lazyLoad(node, resolve) {
          // const { level } = node; // = node.level
          const { value } = node;
          let parentId = value;
          if (parentId == undefined) {
            parentId = 0;
          }
          setTimeout(() => {
            classifyApi.getListById(parentId).then(result => {
              if (result.data.data.length > 0) {
                const nodes = Array.from(result.data.data).map(item => ({
                  value: item.categoryId,
                  label: item.categoryName
                  // 是否为叶子节点的标志位 (默认字段为leaf，可通过props.leaf修改)
                  // leaf: level > item.categoryLevel
                }));
                // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                resolve(nodes);
              } else {
                resolve();
              }
            });
          }, 1000);
        }
      }
    };
  },
  watch: {
    sort: function() {
      this.initTable();
    }
  },
  methods: {
    currentRefresh() {
      this.$router.go(0);
    },
    selectResults() {
      this.initTable();
    },
    handleSelect(index, row) {
     this.updateDelete(row.id)
    },
    handleAudit(index, row) {
     this.delete(row.id)
    },
    // 批量操作
    confirm() {
      console.log(this.multipleSelection);

  
if(this.moreOperation==0){
  this.$message("请选择操作类型");
}

      if(this.moreOperation==1){

        // 将获取的数据处理
                      this.multipleSelection.forEach(v=>{
                         this.updateDelete(v);
                      })
      };

      // 删除
      if(this.moreOperation==2){

        // 将获取的数据处理
                      this.multipleSelection.forEach(v=>{
                     this.delete(v);
                      })
      };
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.initTable();
    },
    handleCurrentChange(val) {
      this.currentPage1 = val;
      this.initTable();
    },
    handleClose(done) {
      done();
    },
    handleSelectionChange(val) {
      if (val.length == this.tableData.length) {
        this.checkbox = true;
      } else if (val.length != this.tableData.length) {
        this.checkbox = false;
      }

      this.multipleSelection = [];
      // 获取选中的ids
      val.forEach(v => {
        this.multipleSelection[this.multipleSelection.length] = v.id;
      });
    },
    toggleSelectionCheckbox() {
      if (this.checkbox) {
        this.tableData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 执行审核
    onSubmit() {
      if (this.goodsAudit.status == "") {
        this.$message({
          type: "warning",
          message: "请选择商品审核！"
        });
        return;
      }
      if (this.goodsAudit.introduction == "") {
        this.$message({
          type: "warning",
          message: "请填写反馈详情！"
        });
        return;
      }

      this.handleSwitch(this.goodsAudit);
    },

    // 将分类拼接起来
    arrayToString(arr) {
      var arrStr = "";
      arr.forEach((item, index) => {
        if (index == 0) {
          arrStr = item;
        } else {
          arrStr += ";" + item;
        }
      });
      return arrStr;
    },
    // 获取页面数据
    initTable() {
      brandApi.listBaseInfo().then(result => {
        this.brands = result.data.data;
      });

      let match = {
        sort: this.sort - 0,
        nameOrEncode: this.form.nameOrEncode,
        brand: this.form.brand,
        category: this.arrayToString(this.form.category),
        audit: 0,
        available:1,
        pageNum: this.currentPage1,
        pageSize: this.pageSize
      };
      spuApi.pageMatchRecycle(match).then(result => {
        this.tableData = result.data.data.list;
        this.tableData.forEach((item, index) => {
          let img = {
            url: null,
            name: "",
            size: null
          };
          if (item.image) {
            img = JSON.parse(item.image);
          }
          this.tableData[index].image = img;

          let price = {};
          // 使用id查询sku
          skuApi.listById(item.id).then(respones => {
            respones.data.data.forEach((item, index) => {
              price[index] = item.price;
            });

            console.log(price);
          });


  // 赋值价格
          this.tableData[index].price = price;
          console.log(this.tableData);
        });
        this.total = result.data.data.total;
      });
    },

    // 审核修改
    handleSwitch(target) {
      var spu = {
        id: target.id,
        status: target.status,
        introduction: target.introduction
      };
      spuApi.updateById(spu).then(() => {
        this.initTable();
        this.$message("成功");
      });
    },
// 修改删除状态

updateDelete(target){

    var spu = {
        id: target,
        isDelete:0
      };
      spuApi.updateById(spu).then(() => {
        this.initTable();
        this.$message("成功");
      });


},
// 删除数据
delete(target){

      spuApi.deleteEn(target).then(() => {
        this.initTable();
        this.$message("成功");
      });


},




  },

  created() {
    this.initTable();
  }
};
</script>
<style>
.common-home,
.content-header {
  border-bottom: 1px solid #e4e4e4;
  position: relative;
}
.common-home > div {
  display: inline-block;
  width: 100px;
  height: 50px;
  vertical-align: top;
  text-align: center;
  line-height: 50px;
  color: #666666;
}
.common-home > .refresh {
  position: absolute;
  right: 10px;
}
.common-home > div > span {
  border: 4px solid #0399fe;
  display: inline-block;
  width: 0px;
  height: 15px;
  vertical-align: middle;
  margin-right: 5px;
  background-color: #0399fe;
}
.parent-body {
  border: 1px solid #e4e4e4;
}
.content-header {
  height: 50px;
  line-height: 50px;
  background-color: #f3f3f3;
  color: #666666;
  position: relative;
  text-align: left;
}
.info-main {
  background-color: #fff;
}

.content-header > div {
  display: inline-block;
}
.content-header > div:last-of-type {
  position: absolute;
  right: 10px;
}
.input-width {
  width: 200px;
}
.select-div {
  display: inline-block;
  width: 300px;
}
.input-width2 {
  width: 120px;
}
.padding-style {
  padding: 0 !important;
}

.info-foot {
  background-color: #fdfdfe;
  height: 60px;
  line-height: 60px;
  position: relative;
}
.paging-style {
  position: absolute;
  right: 10px;
  display: inline-block;
  top: 15px;
}
.margin-left {
  margin-left: 10px;
}
</style>